<template>
  <!-- 跳骚市场 -->
  <el-card>
    <el-row>
      <el-button
        type="primary"
        @click="addcommodity"
      >新增商品类别</el-button>
      <el-button type="danger">批量删除</el-button>
    </el-row>
    <el-table

      :data="list"
      tooltip-effect="dark"
      border
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" />

      <el-table-column
        show-overflow-tooltip
        label="标题"
        prop="title"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="icon"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-image :src="row.imageUrl" style="width: 80px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="类别"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-tag v-if="row.type===2" type="warning">跳蚤市场</el-tag>
          <el-tag v-else type="danger">小区商城</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        header-align="center"
        align="center"
      />

      <el-table-column
        label="操作"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button
            size="mini"
            type="warning"
            @click="dialogFormVisible=true"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">

      <el-pagination
        style="margin-top:30px"
        :current-page="page"
        :page-sizes="[5, 10, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :title="integration == 1 ? '添加商品类型' : '修改商品类型'" width="40%" :visible="dialogFormVisible">
      <el-form ref="ruleForm" :model="form" label-width="120px" style="width: 80%" label-position="top" :rules="rules">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" maxlength="6" />
        </el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="小区商城" value="1" />
            <el-option label="跳蚤市场" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="thumbnail">
          <ImageUpload ref="img" @ImageUpload="address" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="addGoodsType">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>

</template>

<script>
// import { ElMessage, ElMessageBox } from 'element-plus'

import { getGoodsType, delGoodsType, addGoodsType } from '@/api/goodstype.js'
// import goodstype from './goodstype'
export default {

  data() {
    return {
      checkList: [],
      form: {
        title: '',
        region: null
      },
      rules: {
        title: [
          { required: true, trigger: 'blur', message: '标题不能为空' }
        ],
        region: [{ required: true, trigger: 'change', message: '请选择商品类型' }]
      },

      imageUrl: '',

      page: 1,
      size: 10,
      list: [],

      integration: null,
      dialogFormVisible: false,
      zdx: 1,
      formLabelWidth: '220px',
      url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'

      ],

      // table 数据
      multipleSelection: []
    }
  },
  created() {
    this.getGoodsType()
  },
  methods: {
    // 文件上传
    idChange() {
      console.log(this.checkList)
    },
    address(imageUrl) {
      this.imageUrl = imageUrl
    },
    async addGoodsType() {
      this.$refs.ruleForm.validate()
      await addGoodsType({ imageUrl: this.imageUrl, title: this.form.title, type: +this.form.region })
      this.getGoodsType()
      this.$message.success('添加商品类型成功')
      this.list = []
      this.dialogFormVisible = false
      this.imageUrl = ''
      this.form = {
        title: '',
        region: ''
      }
      this.$refs.img.clear()
      this.$refs.ruleForm.resetFields()
    },
    // 获取商品类型
    async getGoodsType() {
      const { data } = await getGoodsType({ page: this.page, size: this.size })
      this.list = data
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //  调整每页条数时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 跳转页时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleDelete(id) {
      this.$confirm('确认删除吗?')
        .then(async() => {
          await delGoodsType({ ids: [id] })
          this.getGoodsType()
          this.$message.success('删除完成')
        })
        .catch(_ => {
          console.log('asd')
        })
    },
    addcommodity() {
      this.integration = 1
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="scss">
.xstsitem{
  margin: 4px;
}
.avatar-uploader {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.avatar {
  width: 128px;
  height: 135px;
  border-radius: 6px;
  margin-top: 20px;
}

</style>>

